<template>
  <div class="editor-container">
    <!-- 编辑器容器 -->
    <div ref="editorRef" :style="{ height: editorHeight }"></div>
  </div>
</template>

<script>
import E from 'wangeditor';
import axios from "axios";

export default {
  name: 'WangEditor',
  props: {
    // 初始内容
    value: {
      type: String,
      default: ''
    },
    // 编辑器高度
    editorHeight: {
      type: String,
      default: '400px'
    },
    // 自定义配置
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      editor: null
    };
  },
  watch: {
    // 监听外部内容变化，更新编辑器
    value(newVal) {
      if (this.editor && newVal !== this.editor.txt.html()) {
        this.editor.txt.html(newVal);
      }
    }
  },
  mounted() {
    this.initEditor();
  },
  beforeDestroy() {
    // 销毁编辑器实例
    if (this.editor) {
      this.editor.destroy();
      this.editor = null;
    }
  },
  methods: {
    initEditor() {
      // 创建编辑器实例
      this.editor = new E(this.$refs.editorRef);

      // 合并默认配置和自定义配置
      const defaultConfig = {
        // 可自定义工具栏
        toolbarConfig: {
          excludeKeys: ['video', 'code', 'table'] // 排除不需要的工具
        }
      };

      const finalConfig = { ...defaultConfig, ...this.config };

      // 应用配置
      Object.assign(this.editor.config, finalConfig);

      // 设置初始内容
      if (this.value) {
        this.editor.txt.html(this.value);
        if (this.value==Object){
          this.editor.txt.html(this.value);
        }
      }

      this.editor.config.uploadImgShowBase64 = true;

      // 监听内容变化，触发更新
      this.editor.config.onchange = html => {
        this.$emit('input', html); // 支持 v-model
        this.$emit('change', html);
      };

      // 监听图片上传，需自行处理上传逻辑
      this.editor.config.uploadImgHooks = {
        customInsert: (insertImgHook, result, editor) => {
          // 通过 result 获取图片 file 对象
          const file = result.file;

          // 创建 FormData 对象用于上传
          const formData = new FormData();
          formData.append('file', file);

          const reader = new FileReader();
          reader.onload = function () {
            const imageUrl = reader.result;
            insertImgHook(imageUrl); // 插入 base64 到编辑器
          };
          reader.readAsDataURL(file);
        }
      };

      // 创建编辑器
      this.editor.create();

      // 触发就绪事件
      this.$emit('ready', this.editor);
    }
  }
};
</script>

<style scoped>
.editor-container {
  width: 100%;
  margin-top: 10px;
}
</style>
